<template>
	<view>
		<view class="bg" @click="toPointDetail">
			<image src="~@/static/point/bg-point.png" mode="" class="bg-img"></image>
			<view class="infos">
				<view class="left-info">
					<text class="iconfont icon-jifen"></text>
					<text class="i2">{{points}}</text>
					<text class="i3">积分</text>
				</view>
				<!-- <view class="right-info">
					<text>数量:</text>
					<text class="i2">0</text>
				</view> -->
			</view>
		</view>
		<view class="left-title">
			<text>积分兑换</text>
		</view>
		<view class="goods-box">
			<view class="g-item" v-for="(item,index) in pointList.data" :key="index">
				<view class="i-t">
					<image :src="item.goods_image" mode="aspectFit"></image>
				</view>
				<view class="i-c">
					<text class="title">{{item.goods_name}}</text>
					<!-- <text class="t2">300ml/瓶</text> -->
					<text class="t3">{{item.selling_point}}</text>
				</view>
				<view class="i-b">
					<view>
						<!-- <text>{{parseInt(item.goods_price_max)}}积分</text> -->
						<text>{{parseInt(item.points_num_max)}}积分</text>
						<!-- <text class="t2">¥ {{item.line_price_max}}</text> -->
					</view>
					<view class="btn" @click="exchange(parseInt(item.goods_price_max),item.goods_id)">
						<text @click="creditsExchange(item)">兑换</text>
					</view>
				</view>
			</view>
		</view>
		<u-modal v-model="changeModel" :content-style="{color: '#666666','font-size': '28rpx',padding: '76rpx 70rpx'}"
			:cancel-style="{'border-right': '1px solid #E9E9E9'}" confirm-color="#C1A27C" :show-title="false"
			show-cancel-button="true">
			<view class="slot-content">
				<text>您确定要兑换“{{showProdName}}”吗？</text>
			</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import * as CheckoutApi from '@/api/checkout'
	import * as UserApi from '@/api/user'
	export default {
		data() {
			return {
				changeModel: false,
				showProdName: '寨山泉瑶寨山泉瑶寨山泉瑶寨山泉瑶寨山泉瑶寨山泉瑶寨山泉瑶寨山泉瑶',
				points: 0,
				pointList: []
			};
		},
		methods: {
			//兑换积分
			async creditsExchange(item){
				console.log(item);
				let data = {
					goodsId : item.goods_id,
					goodsNum: 1,
					payType :30,
					goodsSkuId : item.goodsSkuId ? item.goodsSkuId : "0",
					isUsePoints : 1,
					couponId : 0,
					type: 2,
					mode : 'buyNow'
				}
				// console.log(data);
				this.$navTo('pages/checkout/index', data)
				return
				let mode = 'buyNow'
				CheckoutApi.order(mode,data).then(res=>{
					console.log(res);
				})
				// await this.myhttp({url:'?s=/api/checkout/submit', data}).then(res => {
				// 	console.log(res);
				// })
			},
			getUserInfo() {
				UserApi.info().then(res => {
					this.points = res.data.data.userInfo.points
				})
			},
			//获取积分商品列表
			getPointList() {
				let data = {
					'sortType': 'all',
					'is_points_discount': 1
				}
				this.myhttp({url:'?s=/api/Goods/pointList', data}).then(res => {
					this.pointList = res.data.data.list
				})
			},
			//去积分明细
			toPointDetail() {
				uni.navigateTo({
					url: '/pages/points/log'
				})
			},
			exchange(itemPoints,itemId) {
				if (this.points < itemPoints) {
					uni.showToast({title: '您的积分不足~',icon: 'none'})
				}else {
					let type = 'point'
					uni.navigateTo({
						url: `/pages/mall/appointment?type=${type}&id=${itemId}`
					})
				}

			},

		},
		onLoad() {
			this.getUserInfo()
			this.getPointList()
		}
	}
</script>

<style lang="scss">
	.bg {
		// height: 255upx;
		height: 262upx;
		position: relative;

		.bg-img {
			width: 100%;
			height: 100%;
			z-index: -1000;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}

		.infos {
			line-height: 255upx;
			display: flex;
			justify-content: center;

			.left-info {
				font-size: 48upx;
				font-family: PingFang SC;
				color: #fff;

				.icon-jifen {
					font-size: 48upx;
				}

				.i2 {
					margin: 0 16upx;
				}

				.i3 {
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #fff;
				}
			}

			.right-info {
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;

				.i2 {
					font-size: 48upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					margin-left: 10upx;
				}
			}
		}
	}

	.left-title {
		font-size: 30upx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin: 48upx 0 20upx 20upx;
	}

	.goods-box {
		display: grid;
		grid-template-columns: 50% 50%;
		padding: 0 28upx;
		box-sizing: border-box;
		grid-gap: 20upx;

		.g-item {
			display: flex;
			flex-direction: column;
			background: #FFFFFF;
			box-shadow: 0upx 4upx 8upx 0upx rgba(32, 34, 43, 0.2);
			border-radius: 6upx;
			padding: 0 16upx 32upx;

			.i-t {
				width: 100%;
				position: relative;

				.present {
					position: absolute;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #C1A27C;
					top: 12upx;
					left: 20upx;

					&>image {
						width: 40upx;
						height: 40upx;
						vertical-align: middle;
					}

					&>text {
						vertical-align: middle;
						margin-left: 16upx;
					}
				}

				image {
					width: 100%;
					height: 310upx;
				}
			}

			.i-c {
				display: flex;
				flex-direction: column;
				font-size: 26upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;
				margin: 20upx 0;
				height: 158upx;
				.title {
					height: 68upx;
					overflow: hidden; //一定要写
					text-overflow: ellipsis; //超出省略号
					display: -webkit-box; //一定要写
					-webkit-line-clamp: 2; //控制行数
					-webkit-box-orient: vertical; //一定要写
				}

				.t2 {
					color: #999999;
					margin: 16upx 0 10upx;
				}

				.t3 {
					font-size: 20upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #F99A8A;
				}
			}

			.i-b {
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #C1A27C;
				display: flex;
				justify-content: space-between;

				.t2 {
					font-size: 22upx;
					font-family: PingFang SC;
					font-weight: 400;
					text-decoration: line-through;
					color: #999999;
					margin-left: 4upx;
				}

				.btn {
					width: 104upx;
					height: 44upx;
					line-height: 44upx;
					text-align: center;
					background: #212121;
					border-radius: 22upx;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		}
	}
</style>
